<!doctype html>
<html>
	<head>
		<title>mootools drag/drop test</title>	
		<style type="text/css">
			.aDiv { width:5em; height:5em; border:1px solid red; position:absolute;}
			#div1 { left:20em;top:5em; }
			#div2 { left:5em;top:15em; }
			#div3 { left:35em;top:5em; }
			#div4 { left:35em;top:15em; }
			
			.hover { border: 1px dotted blue; }
		</style>
	</head>
	<body>
	
		<div id="div1" class="aDiv">div one</div>
		<div id="div2" class="aDiv">div two</div>
		<div id="div3" class="aDiv">div three</div>
		<div id="div4" class="aDiv">div four</div>
		
		<div id="div5" class="aDiv">div five</div>
	
	
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
		<script type="text/javascript" src="../js/mootools-1.2.4.4-more.js"></script>
		<script type="text/javascript">
			window.addEvent('domready', function() {
				
				var hoverClass="hover";
				var _droppables = {};
				var _draggables = {};

				/*var _find = function(mainList, filterFunc) {
					var result = [];
					if (mainList) {
						for (var i = 0; i < mainList.length; i++) {
							if (!filterFunc(mainList[i]))
								result.push(mainList[i]);
						}
					}
					return result;
				};*/

				var _add = function(mainList, scope, el) {
					var l = mainList[scope];
					if (!l) {
						l = [];
						mainList[scope] = l;
					}
					l.push(el);
				};

				var initDroppable = function(el, scope) {
					_add(_droppables, scope, el);
					var filterFunc = function(entry) {
						return entry.element != el;
					};
					//var draggables = _find(_draggables[scope], filterFunc);
					var draggables = _draggables[scope] ? _draggables[scope].filter(filterFunc) : [];
					for (var i = 0; i < draggables.length; i++)
						draggables[i].droppables.push(el);
				};

				var initDraggable = function(target, scope) {
					var filterFunc = function(entry) {
						return entry.get("id") != target.get("id");
					};
					var d = _droppables[scope] ? _droppables[scope].filter(filterFunc) : [];
					var drag = new Drag.Move(target, 
					{
						droppables:d, 
						onDrop: function(el, dr) {
							if (dr) {
								alert("dropped " + el.get("id") + " on " + dr.get("id"));
							}
						},
						onLeave: function(el, dr) {							
							if (dr) dr.removeClass(hoverClass); 
						},
						onEnter: function(el, dr) {
							if (dr) dr.addClass(hoverClass);//dr.setStyle('border', '1px solid blue');
						}
					});
					_add(_draggables, scope, drag);
				};

				initDroppable($("div1"), 'scope1');
				initDroppable($("div2"), 'scope1');
				initDroppable($("div3"), 'scope2');
				
				initDraggable($("div1"), 'scope1');
				initDraggable($("div2"), 'scope1');
				initDraggable($("div4"), 'scope2');
				initDraggable($("div3"), 'scope2');

				// note we have not yet inited div4 as a droppable.  doing that here will
				// not result in anyone being able to drop on it, as they're already been initialised
				// we need to fix that.
				initDroppable($("div4"), 'scope2');

				// now let's do a whole new element - draggable AND droppable.
				// windows 3 and 4 should be able to interact with this
				initDraggable($("div5"), 'scope2');
				initDroppable($("div5"), 'scope2');
			});
		</script>
	</body>
</html>